<template>
	<div class="evidence-unit-case-container">
		<el-table
			ref="multipleTable"
			:data="tableData"
			:default-sort="{ prop: 'name', order: 'descending' }"
			:row-style="{ height: '0' }"
			:cell-style="{ padding: '1' }"
			size="medium"
			style="width: 100%"
		>
			<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
			<el-table-column align="center" property="caseNo" sortable label="文书编号" show-overflow-tooltip />
			<el-table-column align="center" property="inspectionNo" sortable label="案件性质" show-overflow-tooltip />
			<el-table-column align="center" property="caseName" sortable label="案件名称" show-overflow-tooltip />
			<el-table-column align="center" property="caseTime" sortable label="案发时间" show-overflow-tooltip>
				<template #default="scope">
					{{ dateFormat(scope.row.caseTime) }}
				</template>
			</el-table-column>
			<el-table-column align="center" property="hostUserName" sortable label="主办干警" show-overflow-tooltip />
			<el-table-column align="center" property="hostUserOrganName" sortable label="主办单位" show-overflow-tooltip />
			<el-table-column align="center" label="操作" width="170px">
				<template #default="scope">
					<el-button type="primary" @click="onHandleInfo(scope.row)" plain size="mini">{{ outTypeTitle }}</el-button>
					<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">个案详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pager.pageSize"
			layout="prev, pager, next, jumper,total,sizes"
			:total="pager.total"
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			prev-text="上一页"
			next-text="下一页"
			background
		>
		</el-pagination>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '/@/store/index';
import { getOutType, dateFormat } from '/@/common/index';

export default {
	name: 'BorrowList',
	components: {},
	props: { tableData: Object, outType: String, pager: Object },
	setup(props: any, { emit }) {
		const router = useRouter();
		const store = useStore();
		const state = reactive({
			outTypeTitle: getOutType(props.outType),
			tableData: props.tableData,
			outType: props.outType,
			pager: props.pager,
		});
		//借调
		const onHandleInfo = (row: any) => {
			const eroute = router.getRoutes().find((x) => x.name == 'EvidenceCommonEdit') as any;
			eroute.meta.title = state.outTypeTitle + '申请';
			store.dispatch('customs/setCustoms', { caseInfo: row });
			router.push({ path: '/evidence/common/edit', query: { outType: props.outType, t: new Date().getTime() } });
		};
		//详情
		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.id },
			});
		};
		//选中行事件
		const tableRowClassName = (row: any, rowIndex: number) => {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		};
		function onHandleSizeChange(pageSize: number) {
			state.pager.pageSize = pageSize;
			emit('reload');
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.pager.page = pageIndex;
			emit('reload');
		}
		return {
			onDetailsInfo,
			onHandleInfo,
			tableRowClassName,
			onHandleSizeChange,
			onHandleCurrentChange,
			dateFormat,
			...toRefs(state),
		};
	},
};
</script>
